<template>
  <div>
    <h4>自定义指令2</h4>
    <!-- <p>
        <input type="text">
    </p>
     <p>
        <input v-focus type="text">
    </p> -->
    <!-- <p>
         <input v-model="val" v-phone="val" type="text">
    </p> -->

    <div v-drag class="one"></div>

    <div v-drag class="two"></div>

    <div v-drag class="three"></div>
  </div>
</template>

<script>
// 封装防抖的指令  
export default {
  data() {
    return {
      val: "",
    };
  },
  directives: {
    // focus: {
    //     inserted(el) {
    //         el.focus()
    //     }
    // }

    // 验证手机号
    phone: {
      update(el, { value }) {
        if (value.length === 11) {
          el.style.color = "green";
        } else {
          el.style.color = "red";
        }
        // console.log(123)
      },
    },
    // 拖拽
    drag: {
      bind(el) {
        el.addEventListener("mousedown", (ev) => {
          //   // 设置定位
          //   el.style.position = "absolute";
          let disX =  ev.offsetX;
          let disY =  ev.offsetY;

        //   el.style.left = ev.clientX - disX + "px";
        //   el.style.top = ev.clientY - disY + "px";
          console.log(disX, disY);
          let move = (ev) => {
            el.style.left = ev.pageX - disX + "px";
            el.style.top = ev.pageY - disY + "px";
          };
            document.addEventListener("mousemove", move);
            document.addEventListener("mouseup", () => {
            document.removeEventListener("mousemove", move);
          });
        });
      },
    },
  },
};
</script>

<style scoped>
.one {
  width: 100px;
  height: 100px;
  background: orange;
  position: absolute;
}

.two {
  width: 150px;
  height: 150px;
  background: skyblue;
  border-radius: 50%;
  position: absolute;
  /* top: 300px;
  left: 300px; */
}

.three {
  width: 100px;
  height: 100px;
  background: pink;
  position: absolute;
  /* top: 300px;
  left: 600px; */
}
</style>